<template>
  <div class="centerRight2">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <span>
          <i class="iconfont icon-vector" />
        </span>
        <div class="d-flex">
          <span class="fs-xl text mx-2 title-size">器材使用情况</span>
        </div>
      </div>
      <div class="up">
        <div
          class="bg-color-black item"
          v-for="item in titleItem"
          :key="item.title"
        >
          <p class="ml-3 colorBlue fw-b">{{ item.title }}</p>
          <div>
            <dv-digital-flop class="dv-dig-flop ml-1 mt-1 pl-3" :config="item.config" />
          </div>
        </div>
      </div>
      <div class="d-flex mt-1 jc-center body-box">
        <dv-scroll-board class="dv-scr-board" :config="config" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, onMounted } from 'vue'

const config = reactive({
  header: ['场馆', '人数', '场馆状态'],
  data: [
    ['组件1', 'dev-1', "<span  class='colorGrass'>↑75%</span>"],
    ['组件2', 'dev-2', "<span  class='colorRed'>↓33%</span>"],
    ['组件3', 'dev-3', "<span  class='colorGrass'>↑100%</span>"],
    ['组件4', 'rea-1', "<span  class='colorGrass'>↑94%</span>"],
    ['组件5', 'rea-2', "<span  class='colorGrass'>↑95%</span>"],
    ['组件6', 'fix-2', "<span  class='colorGrass'>↑63%</span>"],
    ['组件7', 'fix-4', "<span  class='colorGrass'>↑84%</span>"],
    ['组件8', 'fix-7', "<span  class='colorRed'>↓46%</span>"],
    ['组件9', 'dev-2', "<span  class='colorRed'>↓13%</span>"],
    ['组件10', 'dev-10', "<span  class='colorGrass'>↑76%</span>"],
    ['组件11', 'dev-11', "<span  class='colorGrass'>↑76%</span>"],
    ['组件12', 'dev-12', "<span  class='colorGrass'>↑76%</span>"],
    ['组件13', 'dev-13', "<span  class='colorGrass'>↑76%</span>"]
  ],
  rowNum: 5, //表格行数
  headerHeight: 15,
  headerBGC: '#0f1325', //表头
  oddRowBGC: '#0f1325', //奇数行
  evenRowBGC: '#171c33', //偶数行
  index: true,
  // columnWidth: [50],
  align: ['center']
})
// 下层数据
const titleDate = [
  {
    number: 1020,
    text: '总器材数'
  },
  {
    number: 18,
    text: '使用中器材数'
  },
  {
    number: 4,
    text: '维修中器材数'
  },
]
const titleItem = reactive([])

// 初始化数据
onMounted(() => {
  setData()
})
// 设置数据
const setData = () => {
  titleDate.map(e => {
    titleItem.push({
      title: e.text,
      config: {
        number: [e.number],
        toFixed: 1,
        textAlign: 'left',
        content: '{nt}',
        style: {
          fontSize: 26
        }
      }
    })
  })
}
</script>

<style lang="scss" scoped>
//$box-height: 410px;
$box-width: 100%;
.centerRight2 {
  padding: 16px;
  padding-top: 20px;
  //height: $box-height;
  width: $box-width;
  border-radius: 5px;
  .bg-color-black {
    //height: $box-height - 30px;
    border-radius: 10px;
  }
  .up {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    .item {
      border-radius: 6px;
      padding-top: 8px;
      margin-top: 8px;
      width: 32%;
      height: 70px;
      .dv-dig-flop {
        width: 150px;
        height: 30px;
      }
    }
  }
  .title-size{
    font-size: 10px;
  }
  .text {
    color: #c3cbde;
  }
  .body-box {
    border-radius: 10px;
    overflow: hidden;
    .dv-scr-board {
      width: 100%;
      height: 230px;
      padding: 5px 0;
    }
  }
}
</style>
